<template>
  <div class="bookingEvaluate">
    <div class="evaluationBox">
      <div class="title f_14 tc_5 margin_b8">请对此次服务进行评价</div>
      <div class="rate bg_w border_r8 flex_r_sb_c margin_b12">
        <span class="rateLeft f_14 tc_1">总体评分</span>
        <div class="rateRight flex_r_fe_c">
          <van-rate v-model="rate.rateValue" size="2rem" color="#31A2A3" void-icon="star" void-color="#ccc" @change="changeRate" />
          <div v-if="rate.rateValue !== 0" class="f_14 tc_1 margin_l12">{{ rate.rateValue }}分</div>
        </div>
      </div>
      <div class="rateInput bg_w border_r8">
        <van-field class="f_14" style="line-height: 2.4rem" v-model="rate.rateInput" rows="5" autosize maxlength="200" show-word-limit type="textarea" :placeholder="rateMessage" />
      </div>
    </div>
    <div class="footer bg_w">
      <van-button class="footerBtn bg_g tc_w f_16" color="#31A2A3" :disabled="btnDisable" :loading="btnDisable" round block type="info" @click="submitEvaluation"> 提交评价 </van-button>
    </div>
  </div>
</template>

<script>
import user from '@/api/user'
export default {
  data() {
    return {
      id: this.$route.params.id,
      rate: {
        rateValue: 0,
        rateInput: ''
      },
      btnDisable: false,
      rateMessage: '请输入评价(选填)',
      fiveStar: '感谢您的五星好评, 期待您的下次莅临!',
      fourStar: '感谢您的好评与认同, 期待您的下次到来!',
      threeStar: '参观过程中是否有不满意的地方, 一定要告诉我哦!',
      twoStar: '是我们哪里做的不足嘛, 告诉我, 下次一定改!',
      oneStar: '十分抱歉让您在这次参观中感到不舒心, 我们会细心反馈您意见与整改!'
    }
  },
  methods: {
    changeRate(value) {
      switch (value) {
        case 1: {
          this.rateMessage = '十分抱歉让您在这次参观中感到不舒心, 我们会细心反馈您意见与整改!'
          return
        }
        case 2: {
          this.rateMessage = '是我们哪里做的不足嘛, 告诉我, 下次一定改!'
          return
        }
        case 3: {
          this.rateMessage = '参观过程中是否有不满意的地方, 一定要告诉我哦!'
          return
        }
        case 4: {
          this.rateMessage = '感谢您的好评与认同, 期待您的下次到来!'
          return
        }
        case 5: {
          this.rateMessage = '感谢您的五星好评, 期待您的下次莅临!'
          return
        }
        default: {
          return ''
        }
      }
    },
    submitEvaluation() {
      if (this.rate.rateValue === 0) {
        this.$toast.fail('请评分!')
        return
      }
      let _this = this
      _this.btnDisable = true
      let data = {}
      data.join_id = _this.id
      data.score = _this.rate.rateValue
      data.content = _this.rate.rateInput
      let message = this.rateMessage
      user.submitBookingRate(data).then((res) => {
        console.log(res)
        _this.btnDisable = true
        this.$dialog
          .alert({
            messageAlign: 'center',
            confirmButtonColor: '#31A2A3',
            confirmButtonText: '返回',
            message: message
          })
          .then(() => {
            _this.$router.replace({
              path: `/bookingInfo/${this.id}`
            })
          })
          .catch(() => {})
      })
      // setTimeout(function () {
      //   _this.btnDisable = false
      // }, 3000)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.bookingEvaluate {
  padding: 1.6rem 1.4rem;
  box-sizing: border-box;
  .rate {
    width: 34.5rem;
    height: 4.8rem;
    padding: 0 1.4rem;
    box-sizing: border-box;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  }
  .rateInput {
    overflow: hidden;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  }
}
.footer {
  width: 100%;
  height: 6rem;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: 0px -4px 8px rgba(204, 204, 204, 0.15);
  .footerBtn {
    width: 34.3rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    border-radius: 4rem;
    margin: 1rem auto;
  }
}
</style>
